<template>
  <div>
    <div class="header">
      <table class="table-goods">
        <colgroup >
          <col name="col01" width="20%">
          <col name="col02" width="70%">
          <col name="col02" width="10%">
        </colgroup>
        <thead>
          <tr>
            <th>星期</th>
            <th>课时</th>
            <th>操作</th>
          </tr>
        </thead>
        <tr v-for="(item,index) in mySchedule" :key="index">
          <td >
            <span>{{item.day}}</span>
          </td>
          <td class="time1" v-for="(data1,index1) in item.data" :key="index1">
            <span @click="changeTime(index, index1, data1.id)">{{data1.startTime + '-' + data1.endTime}} <br> </span>
          </td>
          <td >
            <span @click="toMenu(index)" class="opt" >管理</span>
            <span class="opt" >查看</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import scheduleData from '@/data/schudle'
import Ppp from '@/data/ppp.js'
export default {
  name: 'Schedule',
  beforeMount () {
    this.getSchedule()
  },
  mounted () {
    console.log('mounted==Main=============================' + this.typeTime)
    var that = this
    Ppp.$on('sendTime', function (msg) {
      console.log(msg)
      that.dealTime(msg)
    })
    // Ppp.$on('sendTime', dealTime(msg))
  },
  methods: {
    toMenu (index) {
      this.$router.push({path: '/pub/manageSchedule', query: {data: this.mySchedule[index].data}})
    },
    dealTime (msg) {
      console.log('dealTime---------------' + msg.startTime)
      // let str = msg.startTime + '-' +msg.endTime
      this.mySchedule[this.indexDay].data[this.indexData].startTime = msg.startTime
      this.mySchedule[this.indexDay].data[this.indexData].endTime = msg.endTime
    },
    // index：星期一~日，共七条数据，index1：.day=说明；.data=课时段
    changeTime (index, index1, id) {
      console.log('------星期一~日------' + index + '，课时段==' + index1)
      console.log('------------' + this.mySchedule[index].data[index1].startTime)
      let startTime1 = this.mySchedule[index].data[index1].startTime
      let endTime1 = this.mySchedule[index].data[index1].endTime
      // this.mySchedule[index].data[index1].startTime = 'iiiii'
      this.indexDay = index
      this.indexData = index1
      this.id = id
      this.$router.push({path: '/pub/addSchedule', query: {startTime: startTime1, endTime: endTime1}})
    },
    getSchedule () {
      console.log('11111111111111111111' + this.mySchedule)
      this.mySchedule = scheduleData.schedule
      console.log('methods==Main=============================' + this.mySchedule)
    },
    login () {
      console.log('12222222222')
      this.$router.push('/Hello')
    }
  },
  data () {
    return {
      msg: 'schedule',
      typeTime: [],
      mySchedule: [],
      indexDay: 0,
      indexData: 0,
      id: 0
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
  width: 100%;
}
.table-goods {
    width: 100%;
    top: 0px;
    margin-top: 15px;
    color: rgb(15, 15, 15);
    table-layout: fixed;
    /* border-collapse: collapse; */
    user-select: none;
    border: 2px solid rgba(95, 95, 121, 0.116);
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(214, 119, 11, 0.1);
  }
  .table-goods td {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    /* padding-left: 12px; */
    border: 2px solid rgba(192, 202, 189, 0.26);
    /* background-color: rgba(149, 191, 103, .1); */
    /* display: inline-block; */
  }
  .table-goods th {
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(141, 103, 191, 0.1);
  }
  .time1 {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* clear: both; */
  }
  .opt {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* height: 40px; */
    /* text-align: center;
    vertical-align: middle;
    display: table-cell; */
    /* clear: both; */
  }
</style>
